<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bw {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #cccccc;
            margin: 100px auto;
        }

        .bw input {
            width: 350px;
            height: 50px;
            border: 0;
            outline: none;
        }

        .bw img {
            position: absolute;
            top: 20px;
            right: 2px;
            width: 25px;
        }
    </style>
</head>

<body>
    <div class="bw">
        <label for="">
            <img src="images/close.png" alt="" id="img1">
        </label>
        <input type="password" name="" id="passwd1">
    </div>

    <script>
        const imgObj = document.querySelector("img")
        const inputObj = document.querySelector("input")
        let flag = 0; //关闭状态
        imgObj.onclick = function () {
            //打开
            if (flag == 0) {
                // alert("图片切换")
                //修改input元素的 type属性为text
                inputObj.type = "text"
                //修改显示图片
                this.src = 'images/open.png'
                //需求：需要像开关一样两种状态进行切换
                //打开完后将状态设置为关闭
                flag = 1;
            }else{
                //关闭
                inputObj.type = "password"
                this.src = "images/close.png"
                flag = 0;   
                //关闭后设置为打开
            }

        }
    </script>
</body>

</html>